<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>车辆使用记录管理</title>

<script type="text/javascript">

var $grid;
$(function(){
	$grid = $("#grid").datagrid({
		url:"${ctx}/basic/carUseRecord/dataGrid",
		title:"车辆管理",
		method:"get",
		idField:"id",
		remoteSort:"true",
		multiSort : true,
		rownumbers : true,
		singleSelect : true,
		fit : true,
		toolbar : '#tt',
		pagination : true,
		pageList : [ 10, 20, 30, 40, 50, 100 ],
		columns : [ [ {
			field : 'ck',
			checkbox : true
		}, {
			field : 'carId',
			title : '车辆ID',
			sortable : true,
			editor : "text",
			onDblClickCell : function(rowIndex, field, value){
				$(this).datagrid('beginEdit', index);
				var ed = $(this).datagrid('getEditor', {index:index,field:field});
				$(ed.target).focus();
				$("#carDlg").dialog("open").dialog("setTitle", "车辆信息");
			} 
		}, {
			field : 'userName',
			title : '使用者',
			sortable : true
		}, {
			field : 'startPlace',
			title : '起始地址',
			sortable : true
		}, {
			field : 'endPlace',
			title : '结束地址',
			sortable : true
		}, {
			field : 'oilMoney',
			title : '加油费用',
			sortable : true
		}, {
			field : 'cleanMoney',
			title : '洗车费用',
			sortable : true
		}, {
			field : 'startTime',
			title : '开始时间',
			sortable : true
		}, {
			field : 'endTime',
			title : '结束时间',
			sortable : true
		},{
			field : 'remark',
			title : '备注',
			sortable : true
		} ] ],
		enableHeaderClickMenu : true, //此属性开启表头列名称右侧那个箭头形状的鼠标左键点击菜单
		enableHeaderContextMenu : true, //此属性开启表头列名称右键点击菜单
		enableRowContextMenu : false
	});
	
	
	//增加按钮
	$("#add").click(function() {
		$("#fm").form("clear");
		$('#fm').form('load', {
			enable : 1
		});

		$("#dlg").dialog("open").dialog("setTitle", "新增车辆信息");
	});
	
	//编辑按钮
	$("#edit").click(function() {
		var rowData = $grid.datagrid("getSelected");
		if (rowData == null) {
			$.messager.show({
				msg : "您未选中行，无法编辑",
				icon : "warning",
				position : "bottomRight"
			});
		} else {
			$("#dlg").dialog("open").dialog("setTitle", "编辑车辆信息");
			$("#fm").form("load", rowData);
		}
	});
	
	//删除按钮
	$("#delete").click(function() {
		var rowData = $grid.datagrid("getSelected");
		if (rowData == null) {
			$.messager.show({
				msg : "您未选中行，无法删除",
				icon : "warning",
				position : "bottomRight"
			});
		} else {
			$.messager.confirm("您确定要进行该操作？", function(c) {
				if (c) {
					$.get("${ctx}/basic/carUseRecord/delete/" + rowData.id, function(result) {
						$.messager.show({
							msg : result.msg,
							icon : "info",
							position : "bottomRight"
						});
						if (result.success) {
							$grid.datagrid("load");
						}
					}, 'json');
				}
			});
		}
	});
	
	//查询
	$("#search").click(function() {
		$grid.datagrid('load', $("#tt").form("getData"));
	});
});

//保存
function fn_save() {
	$("#fm").form("submit", {
		url : "${ctx}/basic/carUseRecord/update",
		success : function(data) {
			$grid.datagrid("load");
			$.messager.show({
				msg : data.msg,
				icon : "info",
				position : "bottomRight"
			});
			$("#dlg").dialog('close');
		}
	});
}

</script>

</head>
<body>
    <div data-options="region:'center',fit:true,border:false">
		<table id="grid">
		</table>
	</div>
	<div id="tt" class="easyui-toolbar">
		<span>车辆ID：</span>
		<input type="text" name="search_LIKE_carId" style="margin-left: 2px; margin-right: 2px; padding-left: 2px; padding-right: 3px;" />
		<a id="search" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-zoom'">查询</a>
		<div class="dialog-tool-separator"></div>
		<a id="add" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-add'">新增</a>
		<a id="edit" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-pencil'">编辑</a>
		<a id="delete" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-busy'">删除</a>
		<div class="dialog-tool-separator"></div>
		<a id="excelImport" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-page-white-excel'">Excel导入</a>
		<a id="excelExport" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-page-excel'">Excel导出</a>
	</div>
	<div id="dlg" class="easyui-dialog" style="width: 600px; height: 300px; padding: 10px 20px"
		data-options="iconCls:'icon-save',resizable:true,modal:true, buttons:[
                    { text: '保存', iconCls: 'icon-ok', handler: function () { fn_save(); } },
                    { text: '取消', iconCls:'icon-cancel', handler: function () { $('#dlg').dialog('close'); } }
                ],closed:true">
		<form id="fm" method="post">
			<input type="hidden" name="id" />
			<table id="tbl">
				<tr>
					<td><label>车辆编号:</label></td>
					<td><input name="carId" class="easyui-validatebox" data-options="required: true"></td>
					<td><label>使用者:</label></td>
					<td><input name="userName" class="easyui-validatebox" data-options="required: true"></td>
				</tr>
				<tr>
					<td><label>起始地址:</label></td>
					<td><input name="startPlace" class="easyui-validatebox" data-options="required: true"></td>
					<td><label>结束地址:</label></td>
					<td><input name="endPlace" class="easyui-validatebox" data-options="required: true"></td>
				</tr>
				<tr>
					<td><label>加油费用:</label></td>
					<td><input name="oilMoney" class="easyui-validatebox" data-options="required: true"></td>
					<td><label>洗车费用:</label></td>
					<td><input name="cleanMoney" class="easyui-validatebox" data-options="required: true"></td>
				</tr>
				<tr>
					<td><label>开始时间:</label></td>
					<td><input name="startTime" class="easyui-datebox"></td>
					<td><label>结束时间:</label></td>
					<td><input name="endTime" class="easyui-datebox"></td>
				</tr>
				<tr>
					<td><label>备注:</label></td>
					<td><textarea name="remark" cols="20" rows="2"></textarea></td>
				</tr>
			</table>

		</form>
	</div>
	
	<!--车辆列表 -->
	<div id="carDlg" class="easyui-dialog" style="width: 600px; height: 300px; padding: 10px 20px"
	     data-options="closed:true,region:'center',fit:true,border:false">
	     <table id="carGrid">
		 </table>
	  
	</div>
	
</body>
</html>